<template>
    <div class="dzsxq">
        <div class="leftdzs">
            <div style="text-align: center;">
                <img :src="detail.cover" style="width: 60px;height: 83px;" alt="">
            </div>
            <div style="text-align: center;">{{ detail.title }}</div>
            <div :class="cur == index ? 'active' : 'normal'" style="cursor: pointer;" @click="djtw(item)"
                v-for="item, index in detail.book_details">
                <n-button size="tiny">{{ item.type == 'radio' ? '视频' : '图文' }}</n-button> {{ item.title }}
                <n-button size="tiny" type="default" v-if="item.isfree == 1">免费</n-button>
            </div>
        </div>
        <div class="rightdzx">
            <div v-html="content"></div>
        </div>
    </div>
</template>
<script setup>
import { NButton, NPopover, NTabs, NTabPane, createDiscreteApi } from "naive-ui";
import { useRoute } from "vue-router"
import { useRouter } from 'nuxt/app';
import { getCurrentInstance } from "vue";
const route = useRoute()
const router = useRouter();
const value = ref("course");
let { ctx: that, proxy } = getCurrentInstance()
console.log(route.params)
const detail = ref({});
const cur = ref(0);
const content = ref("")
onMounted(() => {
    getdzsxq()
    getsxq()
})
const getsxq = async () => {
    const { message, dialog } = createDiscreteApi(['message', 'dialog'])

    const { data ,error} = await useHttp("", `/book/detail?book_id=${route.params.id}&id=${route.params.cid}`);
    console.log(data.value)
    if (data.value == undefined) {
        // setTimeout(() => {
        //     console.log(error)
        // }, 100)
        // console.log("12333")

        message.warning(error.value.data.data);
    } else {
        content.value = data.value.content





    }



}
const getdzsxq = async () => {
    const { data } = await useHttp("", `/book/read?id=${route.params.id}`);
    console.log(data.value)
    detail.value = data.value;
    detail.value.book_details.forEach((el, index) => {
        if (el.id == route.params.cid) {
            cur.value = index
            that.$forceUpdate()
        }

    });
    console.log(detail.value.cover)
}
const djtw = (item) => {
    router.push("/dzsxq/" + detail.value.id + '/' + item.id);
}


</script>
<style lang="css" scoped>
.dzsxq {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
}

.leftdzs {
    width: 300px;
    height: auto;
    background: #fff;
}

.rightdzx {
    width: calc(100% - 310px);
    height: auto;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
}

.normal {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5e5;

}

.active {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5e5;
    background: rgba(229, 231, 235, 1) !important;
}
</style>